<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="./css/style.css">

</head>

<body>

	<!-- 头部制作 -->
	<header class="header">
		<div>
			<h1>泰山美景·卡片滚动</h1>
			<p>滚动页面，查看卡片滚动效果。</p>
		</div>
	</header>
	<!-- 主体部分 -->
	<main class="main w">
		<ul>
			<li>
				<div class="l">
					<div>
						<h2>云海玉盘</h2>
						<p>云海玉盘,是泰山的四大奇观之一,多在夏秋两季出现。</p>
						<a href="#">了解更多</a>
					</div>
				</div>
				<figure>
					<img src="./img/card1.jpg" alt="">
				</figure>
			</li>
			<li>
				<div class="l">
					<div>
						<h2>泰山佛光</h2>
						<p>泰山佛光大多出现在6-8月中半晴半雾的天气，而且是太阳斜照之时</p>
						<a href="#">了解更多</a>
					</div>
				</div>
				<figure>
					<img src="./img/card2.jpg" alt="">
				</figure>
			</li>
			<li>
				<div class="l">
					<div>

						<h2>晚霞夕照</h2>
						<p>清泉泻万仞，落日御千峰</p>
						<p>谁持彩笔染长空，几处深黄几处红</p>
						<a href="#">了解更多</a>
					</div>
				</div>
				<figure>
					<img src="./img/card3.jpg" alt="">
				</figure>
			</li>
			<li>
				<div class="l">
					<div>
						<h2>泰山日出</h2>
						<p>泰山日出是壮观而动人心弦的，是岱顶奇观之一,也是“天下第一山”——泰山的重要标志</p>
						<a href="#">了解更多</a>
					</div>
				</div>
				<figure>
					<img src="./img/card4.jpg" alt="">
				</figure>
			</li>
		</ul>
	</main>
</body>

</html>